<template>
  <div style="margin:5px auto">
    <common-title :stitle="alldata.title" :alldata="alldata"/>
    <template>
      <!-- <van-row type="flex" justify="center">
        <van-col span="12" style="text-align:center"></van-col>
        <van-col span="12" style="text-align:center"></van-col>
      </van-row> -->

      <el-table :border="false" :data="alldata.columnData" style="width: 100%;margin:5px auto" max-height="300" class="custom-table-header" >
        <el-table-column v-if="alldata.type && alldata.type === '排序表格'"  type="index" align="center" :resizable="false" label="" width="50" :header-cell-style="{'background':'#f8f8f9'}" >
          <template slot-scope="scope" >
            <span v-if="scope.$index+1 == 1">
              <span class=" order1">
                <img src="@/assets/top1.png" style="width:30px"/> 
              </span>
            </span>
            <span v-else-if="scope.$index+1 == 2">
              
              <span class=" order2">
               
                 <img src="@/assets/top2.png" style="width:30px"/> 
              </span>
            </span>
            <span v-else-if="scope.$index+1 == 3">
              
              <span class="order3">
                
                <img src="@/assets/top3.png" style="width:30px"/> 
              </span>
            </span>
            <span v-else >
              <div class="sortOrder">{{scope.$index + 1}}</div>
            </span>
          </template>
        </el-table-column>
        <el-table-column v-for="col in alldata.columnNames"  :label="col.label" :prop="col.prop" :key="col.label" >
        <template slot-scope="scope">
          <div style="font-size:16px">{{scope.row[col.prop].slice(0,7)}}{{scope.row[col.prop].length>8 ? '...':''}}</div>
          <div style="font-size:12px" v-if="col.prop==='销售员'">商务一部</div>
        </template>
        </el-table-column>
      </el-table>

    </template>

  </div>
</template>

<script >
  import commonTitleMixin from '../mixins/commonTitleMixin'
  export default {
    name: 'htable',
    data: function () {
      return {}
    },
    props: ['alldata'],
    mixins: [commonTitleMixin],
    mounted () {
      // //console.log('htable', this.alldata)
    },
    methods: {}
  }

</script>

<style >
 /* .el-table__header{
   background-color: #1c2128 !important 

} */

.el-table  th.el-table__cell {
  background-color: #eff4fb !important;
  padding:5px 0px !important;

 }

 .custom-table-header th.el-table__cell{
  /* background-color: #eff4fb !important; */
  
 }



  .sortOrder {
    position: relative;
    left: 0px;
    bottom: 0px;
    color: #5891e0;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #eff4fa;
    display: flex;
    justify-content: center;
    align-items: center;
   
    font-weight: bolder;
   
  }
   .sortOrder img {
      max-width: 25px;
      max-height: 25px;
      vertical-align: middle;
    }
  

</style>
